<template>
  <div class="container">
    <div class="header">
      <image @tap='topLink' mode="widthFix" class="logo" :src="img" alt="仙逆标志" />
      <h1 class="title">仙逆经典语录</h1>
      <p class="subtitle">王林 - 逆天而行，只尊真情</p>
    </div>

    <div class="quote-block">
      <h2 class="quote-title">王林的宣言</h2>
      <p class="quote-content">
        王林作为《仙逆》中极具魅力的角色，留下了许多彰显其逆天而行、不屈意志的经典语录。他最为人熟知的宣言是：

        “我王林此生不拜天不拜地，只跪父母！只拜司徒！”

        这句话集中体现了王林不畏天地、不敬鬼神、只尊真情与恩义的逆天气魄。
      </p>
    </div>

    <div class="quote-block">
      <h2 class="quote-title">经典语录</h2>
      <div class="quote-table">
        <div class="table-row" v-for="(quote, index) in quotes" :key="index">
          <p class="table-cell type">{{ quote.type }}</p>
          <p class="table-cell content">{{ quote.content }}</p>
        </div>
      </div>
    </div>

    <div class="quote-block">
      <h2 class="quote-title">缘何"不拜天不拜地"</h2>
      <p class="quote-content">
        王林"不拜天不拜地"的宣言，根源在于他坎坷的修行之路和对天道不公的切身之痛。他目睹了挚爱李慕婉因寿元耗尽而香消玉殒，天道无情地夺走了他所珍视之人。这使得他明白，敬畏和屈服换不来想要的结局，唯有抗争到底。

        他所跪拜的"父母"是生养之恩，所拜的"司徒"（司徒南）是知遇之恩和引路之情。王林并非狂妄无知，他的叛逆指向的是无情的天地法则和既定的命运，而非人间真情与恩义。这体现了他性格中极为重要的一点：重情重义，恩仇必报。
      </p>
    </div>

    <div class="quote-block">
      <h2 class="quote-title">王林语录的精神内核</h2>
      <p class="quote-content">
        王林的这些语录，共同勾勒出一个逆天而行、重情重义、杀伐决断且无畏生死的复杂形象：
      </p>
      <div class="quote-list">
        <div class="list-item">
          <span class="emphasize">逆</span>
          <span class="white"> ：是王林最核心的精神。他不信命、不认命，为了挚爱李慕婉，敢于对抗天道，篡改轮回。</span>
        </div>
        <div class="list-item">
          <span class="emphasize">情</span>
          <span class="white">：是王林所有行动的根本动力。对李慕婉的深情，支撑他走过千年复活之路。</span>
        </div>
        <div class="list-item">
          <span class="emphasize">战</span>
          <span class="white"> ：是王林解决问题和捍卫信念的方式。"何惜一战" 彰显其无畏的斗志。</span>
        </div>
      </div>
    </div>

    <div class="quote-block">
      <h2 class="quote-title">总结</h2>
      <p class="quote-content">
        "我王林此生不拜天不拜地，只跪父母！只拜司徒！"这句语录，是王林对天地不仁的激烈反抗，也是他对人间真情至性的最高颂扬。

        他所"逆"之天，是冷漠的命运和不公的规则；他所敬之人，是生命的来处和途中的恩光。这种极端叛逆与极端深情的交织，构成了王林独一无二的魅力。
      </p>
    </div>

    <div class="footer">
      <p>仙逆世界 · 逆凡成仙 · 只为执念 </p>
      <div class="current-time"> {{ currentTime }}</div>
    </div>
  </div>
</template>

<script setup>
  import {
    ref,
    onMounted,
    onUnmounted
  } from 'vue';

  const currentTime = ref('');
  const timer = ref(null);
  const img = ref(
    'https://ts4.tc.mm.bing.net/th/id/OIP-C.rYdZLaYTc9X89mdodAd_XgHaNK?r=0&cb=thfvnext&rs=1&pid=ImgDetMain&o=7&rm=3');
  const quotes = ref([{
      type: '不屈天道',
      content: '“我王林此生不拜天不拜地，只跪父母！只拜司徒！”'
    },
    {
      type: '逆天而行',
      content: '“我与天道抢妻魂，与岁月争稗修。一生所作所为，或许生灵涂炭，但却无愧于心。”'
    },
    {
      type: '执着守护',
      content: '“天要你死，我也要把你抢回来。”'
    },
    {
      type: '杀伐决断',
      content: '“走，我带你去杀人。”'
    },
    {
      type: '生死无畏',
      content: '“死，又有何惜，又有何怕！生为人杰，死亦鬼雄！我辈修士，何惜一战！”'
    }
  ]);

  const updateTime = () => {
    currentTime.value = getCurrentTime();
  };
  const topLink = () => {
    console.log('18.20')
    uni.navigateTo({
      url: '/pages/clock/index'
    })
  }
  const getCurrentTime = () => {
    const date = new Date();
    const year = date.getFullYear();
    const month = formatNumber(date.getMonth() + 1);
    const day = formatNumber(date.getDate());
    const hour = formatNumber(date.getHours());
    const minute = formatNumber(date.getMinutes());
    const second = formatNumber(date.getSeconds());

    return `${year}年${month}月${day}日 ${hour}:${minute}:${second}`;
  };

  const formatNumber = (n) => {
    return n < 10 ? '0' + n : n;
  };

  onMounted(() => {
    updateTime();
    timer.value = setInterval(updateTime, 1000);
  });

  onUnmounted(() => {
    if (timer.value) {
      clearInterval(timer.value);
      timer.value = null;
    }
  });
</script>

<style lang="scss" scoped>
  .container {
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  }

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30rpx;
    margin-bottom: 30rpx;
    border-bottom: 2px solid #4ecca3;
    background: rgba(26, 26, 46, 0.8);
    border-radius: 12rpx;
  }

  .logo {
    width: 100rpx;
    height: 100rpx;
    border-radius: 50%;
    border: 3px solid #4ecca3;
    margin-bottom: 20rpx;
    animation: rotate 15s linear infinite;
    transition: transform 0.3s ease;
    box-shadow: 0 0 15rpx rgba(78, 204, 163, 0.7),
      0 0 30rpx rgba(78, 204, 163, 0.4);
  }

  .logo:hover {
    animation: rotate 3s linear infinite;
    transform: scale(1.05);
  }

  @keyframes rotate {
    from {
      transform: rotate(0deg);
    }

    to {
      transform: rotate(360deg);
    }
  }

  .title {
    font-size: 40rpx;
    color: #4ecca3;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .subtitle {
    font-size: 30rpx;
    color: #f0f0f0;
    margin: 0;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
  }

  .quote-block {
    background: rgba(26, 26, 46, 0.85);
    border-radius: 12rpx;
    padding: 35rpx;
    margin-bottom: 30rpx;
    border-left: 4px solid #4ecca3;
    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.2);
  }

  .quote-title {
    font-size: 36rpx;
    color: #4ecca3;
    margin-bottom: 20rpx;
    font-weight: bold;
  }

  .quote-content {
    font-size: 32rpx;
    color: #f5f5f5;
    line-height: 1.8;
    margin: 0;
    text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
  }

  .quote-table {
    display: flex;
    flex-direction: column;
    margin: 20rpx 0;
  }

  .table-row {
    display: flex;
    flex-direction: row;
    border-bottom: 1px solid rgba(78, 204, 163, 0.3);
    padding: 25rpx 0;
    transition: background-color 0.3s ease;
  }

  .table-row:hover {
    background-color: rgba(78, 204, 163, 0.05);
  }

  .table-cell {
    padding: 10rpx;
    margin: 0;
  }

  .type {
    flex: 0 0 180rpx;
    color: #4ecca3;
    font-weight: bold;
    font-size: 30rpx;
  }

  .content {
    flex: 1;
    color: #f5f5f5;
    font-size: 30rpx;
    line-height: 1.6;
  }

  .type {
    color: #4ecca3;
    font-weight: bold;
  }

  .quote-list {
    margin: 20rpx 0;
  }

  .list-item {
    padding: 25rpx;
    margin-bottom: 20rpx;
    background: rgba(79, 204, 163, 0.1);
    border-radius: 8rpx;
    border-left: 3px solid #4ecca3;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

    .white {
      color: #fff;
    }
  }

  .list-item:hover {
    transform: translateX(10rpx);
    box-shadow: 0 4rpx 15rpx rgba(78, 204, 163, 0.15);
  }

  .emphasize {
    color: #4ecca3;
    font-weight: bold;
  }

  .footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 40rpx;
    padding: 30rpx;
    color: #b0b0b0;
    font-size: 26rpx;
    border-top: 1px solid #4ecca3;
    gap: 10rpx;
  }

  .current-time {
    color: #4ecca3;
    font-size: 28rpx;
    font-weight: 500;
    letter-spacing: 1rpx;
    margin-top: 20rpx;
  }
</style>